<template>
  <div class="main-div">
    <Row>
      <Col span="24">
        <Card dis-hover class="task-card">
          <div class="app-container">
            <el-row type="flex" justify="start" style="margin-left: -40px">
              <el-form :inline="true" :model="queryForm"  label-width='80px' inline size='mini'>
                <el-form-item label="名称">
                  <el-input v-model="queryForm.nameOrCategory" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>

            <el-row type="flex" justify="start" >
              <el-form class="demo-form-inline" label-width='80px' inline size='mini'>
                <el-form-item>

                  <el-button type="primary" @click="addModelDialog" ><Icon type="ios-add"/>
                    添加</el-button>
                  <el-button type="error" v-if="checkTableData.length>0">
                    <Icon type="md-trash"/>
                    删除
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>

            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                  @select="tableSelect"
                  @select-all="tableSelect"
                >
                  <el-table-column
                    type="selection"
                    width="55"
                    fixed
                  >
                  </el-table-column>

                  <el-table-column
                    prop="id"
                    label="序号"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="名称"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="category"
                    label="脚本类型"
                    show-overflow-tooltip

                  >
                  </el-table-column>
                  <el-table-column
                    prop="memo"
                    label="备注"
                    show-overflow-tooltip
                  >
                  </el-table-column>

                  <el-table-column
                    label="操作"
                    >
                    <template slot-scope="scope">
                      <el-button   size='mini' type='text' icon="el-icon-edit"   @click="edit(scope.row.id)"></el-button>
                      <el-button  size='mini' type='text'  icon="el-icon-delete"   @click="del(scope.row.id)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
        <Modal
          :mask-closable="false"
          title="添加常用脚本"
          :transfer="false"
          v-model="addModel"
          width="50%">
          <Form :model="addForm" :label-width="80" :rules="ruleValidate" ref="addForm">
            <FormItem label="名称" prop="name">
              <Input v-model="addForm.name" ></Input>
            </FormItem>
            <FormItem label="脚本" prop="script">

              <Input v-model="addForm.script" type="textarea"  :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
            <FormItem label="脚本分类">
              <Select v-model="addForm.select" @on-change="selectChange"  >
                <Option v-for="item in category" :value="item.category" :key="item.id">{{ item.category }}</Option>
              </Select>
            </FormItem>
            <FormItem label="分类" prop="category">
              <Input v-model="addForm.category"  ></Input>
            </FormItem>
            <FormItem label="备注" prop="memo">
              <Input v-model="addForm.memo"  ></Input>
            </FormItem>
          </Form>
          <div slot="footer">
            <el-button type="primary"  @click="handleSubmit('addForm')"   :loading="loading">确定</el-button>
            <el-button  @click="handleReset('addForm')" >取消</el-button>


            <Button type="primary" @click="preViewScript">
              <Icon type="ios-bug"/>
              测试
            </Button>
          </div>

        </Modal>

      </Col>


    </Row>
    <Row>
      <Col span="24">
        <footer></footer>
      </Col>
    </Row>
  </div>


</template>

<script>
  import {getScript, getScriptType, executeScript, saveScript, removeScript, getScriptById} from "@/api/analy";
  import Footer from '../../../common/footer';

  export default {
    name: 'Task',
    components: {
      Footer
    },

    data() {
      return {
        loading:false,

        tableData: [],
        checkTableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        addModel: false,
        forbiddenSwitch: false,
        chartData: {},
        sellerId: 0,
        category: [],
        addForm: {
          name: "",
          id: "",
          script: "",
          category: "",
          select: [],
          memo: ""

        },
        ruleValidate: {
          name: [
            {required: true, message: '名称必须填写', trigger: 'blur'}
          ],
          script: [
            {required: true, message: '脚本必须填写', trigger: 'blur'}
          ],
          category: [
            {required: true, message: '分类必须填写', trigger: 'blur'}
          ],
        },
        queryForm: {
          script: "",
          nameOrCategory: "",
          page: 0,
          limit: 10,
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created: function () {
      this.getData()
    },
    methods: {
      del: function (id) {
        //removeScript
        var ids = []
        ids.push(id);
        removeScript({ ids : ids }).then((response) => {
          if (response.code == 0) {
            this.getData()
          }else{
            this.$message({"duration":'800',message:response.msg,type:'warning',customClass:'zZindex'});
          }
        })
      },
      edit: function (id) {
        this.addModelDialog()
        getScriptById(id).then((response) => {
          var result = response.result;

          this.addForm.name = result.name
          this.addForm.id = result.id
          this.addForm.script = result.script
          this.addForm.category = result.category
          this.addForm.memo = result.memo

          this.addForm.select = result.category

        })
      },
      preViewScript: function () {
        if (this.addForm.script.length > 0) {
          this.queryForm.script = this.addForm.script
          executeScript(this.queryForm).then((response) => {
            this.$Message.success(response.msg);
          })
        } else {
          this.$Message.error('脚本内容为空');
        }
      },
      handleReset(name) {
        this.$refs[name].resetFields();
        this.addModel = false
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.loading=true

            saveScript(this.addForm).then((response) => {
              var code = response.code;
              if (code == 0) {
                this.addModel = false;
                this.handleReset('addForm')
                this.getData()
              }else{
                this.$message({"duration":'800',message:response.msg,type:'success',customClass:'zZindex'});

              }

              this.loading=false


            })

          } else {
          }
        })
      },
      tableSelect: function (data) {
        this.checkTableData = data;
      },
      selectChange: function (data) {
        this.addForm.category = data;
      },
      addModelDialog: function () {
        getScriptType(null).then((response) => {
          this.category = response.data
        })


        this.addModel = true;
      },
      queryFormCreateTime: function (e) {
        this.queryForm.tmpCreateTime = e;
      },
      queryFormEndTime: function (e) {
        this.queryForm.tmpEndTime = e;
      },
      getData: function () {
        getScript(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);
          this.checkTableData = [];
        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.page = 0
        this.getData()
      },
      reset() {
        this.queryForm.nameOrCategory = "";
        this.queryForm.page = 0
        this.getData()
      }

    }

  }


</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }
  .main-div {
    background-color: #f3f3f3!important;
  }

</style>
